<template>
  <el-card>
    <el-form label-width="100px">
      <el-form-item label="订单编号：">
        <strong> {{ ticket.id }}</strong>
      </el-form-item>
      <el-form-item label="门票名称：">
        <strong>{{ ticket.ticketName }}</strong>
      </el-form-item>
      <el-form-item label="购买价格：">
        <strong>￥{{ ticket.ticketPrice }}</strong>
      </el-form-item>
      <el-form-item label="购买时间：">
        <strong>{{ ticket.ticketBuyTime }}</strong>
      </el-form-item>
      <el-form-item label="入园时间：">
        <strong>{{ ticket.ticketExpireTime }}</strong>
      </el-form-item>
      <el-form-item label="门票状态：">
        <el-button type="text">{{ ticketStatus[ticket.ticketStatus] }}</el-button>
      </el-form-item>
      <el-form-item label="门票二维码：">
        <div id="code">
        <el-image v-if="ticket.ticketStatus==='UN_USE'" :preview-src-list="[imageUrl]" :src="imageUrl" alt="门票二维码"/>
          <div v-if="ticket.ticketStatus==='USED'||ticket.ticketStatus==='EXPIRE'"><el-result icon="error" title="无法显示" sub-title="门票无法使用"></el-result></div>
          <div v-if="ticket.ticketStatus==='USING'"><el-result icon="success" title="门票有效" sub-title="可以进入景区"></el-result></div>
        </div>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {getTicketDetail} from "@/api/ticket";
import QRCode from "qrcode";

export default {
  name: "ticketDetail",
  props:['ticketId'],
  data(){
    return{
      imageUrl:'',
      isSuccess:false,
      ticketStatus:{'UN_USE':'未使用','USED':'已使用','EXPIRE':'已过期','USING':'使用中'},
      ticket:{},
      QRCodeMsg:'',
      inter:'',
    }
  },
  mounted() {
    this.ticketDetail()
  },
  unmounted() {

  },
  watch:{
    'ticket.ticketStatus':{
      immediate:true,
      deep:true,
      handler(newVal){
        if (newVal==='UN_USE'){
          let that=this
          this.bindQRCode()
          this.$websocket.wsT.onmessage=function(event){
            const msg=JSON.parse(event.data)
            if(msg.message==='ticketUSING'){
              that.ticket.ticketStatus='USING'
            }
            console.log(msg)
            if(msg.message==='CANT|SCAN'){
              that.$message({
                type:"warning",
                message:'未到检票时间,如有需要可以到人工窗口检票',
                duration:5000
              })
            }
          }
        }
      }
    }
  },
  methods:{
    ticketDetail(){
      getTicketDetail(this.ticketId).then(response=>{
        this.ticket=response.data.ticketDetail
        this.bindQRCode()
      })
    },
    //生成二维码
    bindQRCode() {
      // this.imageUrl=document.getElementById("canvas")
      const opts = {
        errorCorrectionLevel: "H",//容错级别
        type: "image/png",//生成的二维码类型
        quality: 0.3,//二维码质量
        margin: 12,//二维码留白边距
        width: 200,//宽
        height: 180,//高
        // text: "http://www.xxx.com",//二维码内容
        color: {
          dark: "#333333",//前景色
          light: "#fff"//背景色
        }
      };
      this.QRCodeMsg = {scenic:'yun','id':this.ticket.id,'userid':this.ticket.userId,'status':this.ticket.ticketStatus,'enterTime':this.ticket.ticketExpireTime}; //生成的二维码为URL地址js
      QRCode.toDataURL(JSON.stringify(this.QRCodeMsg), opts).then(url=>{
        this.imageUrl=url
      })

    }
  }
}
</script>

<style scoped>

</style>
